import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Space, Table, Popconfirm, Pagination, Tag, message } from 'antd';
import type { PaginationProps, TableColumnsType } from 'antd';
import { produce } from "immer";
import type { userReqType, userStateType, userResType, userResDataType } from '../../types/userType';
import { formattedDate } from './../../utils/format'
import { getUserList, userStatusSuccess, userStatusCancelOut } from './../../api/user';
import styles from './index.module.scss';



const User: React.FC = () => {
  const [form] = Form.useForm();
  const [reqForm, setReqForm] = useState<userReqType>({
    phone: "",
    username: "",
    status: 0,
    paging: {
      page: 1,
      size: 10
    }
  });
  const [data, setData] = useState<userResType>({
    count: 0,
    data: []
  });

  const stateOpctions: userStateType[] = [{
    value: 0,
    label: "全部"
  }, {
    value: 1,
    label: "生效中"
  }, {
    value: 2,
    label: "已注销"
  }]
  // 表格
  const columns: TableColumnsType<userResDataType> = [
    {
      title: '用户ID',
      dataIndex: 'userId',
      key: 'userId',
    },
    {
      title: '名称',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (_, { createTime }) => {
        return formattedDate(createTime)
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, { status }) => {
        if (status === 1) {
          return <Tag color='volcano' key={status}>
            生效中
          </Tag>
        } else {
          return <Tag color='gold' key={status}>
            已注销
          </Tag>
        }
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_, { status, userId }) => (
        <Space size="middle">
          {status === 1 ? <Popconfirm title="确定注销?" onConfirm={() => { setUserStatusCancelOut(userId) }}>
            <Button type="link">注销</Button>
          </Popconfirm> : <Popconfirm title="确定生效?" onConfirm={() => { setUserStatusSuccess(userId) }}>
            <Button type="link">生效</Button>
          </Popconfirm>}
        </Space>
      )
    },
  ];
  // 查询
  const getDataList = () => {
    getUserList(reqForm).then((res) => {
      if (res.code === 0) {
        setData(res.data)
      }
    });
  }
  // 分页切换
  const onChange: PaginationProps['onChange'] = (page, size) => {
    setReqForm(produce((draft) => {
      draft.paging = { page, size }
    }));
    getDataList();
  };
  // 重置按钮
  const onReset = () => {
    form.resetFields();
  };
  // 解冻
  const setUserStatusCancelOut = (e: number) => {
    userStatusCancelOut({ userId: e }).then((res) => {
      if (res.code === 0) {
        getDataList();
        message.success("解冻成功");
      }
    })
  };
  // 冻结
  const setUserStatusSuccess = (e: number) => {
    userStatusSuccess({ userId: e }).then((res) => {
      if (res.code === 0) {
        getDataList();
        message.success("冻结成功");
      }
    })
  };
  // 初始化加载
  useEffect(() => {
    getDataList();
  }, []);
  return (
    <div className={styles.Account}>
      <div className={styles.Hader}>
        <h2>用户管理</h2>
        <Form
          layout='inline'
          initialValues={reqForm}
          form={form}
        >
          <Form.Item<userReqType> name="phone" style={{ width: 250 }} label="用户电话">
            <Input placeholder="请输入用户电话" />
          </Form.Item>
          <Form.Item<userReqType> name="username" style={{ width: 250 }} label="用户姓名">
            <Input placeholder="请输入用户姓名" />
          </Form.Item>
          <Form.Item<userReqType> name="status" style={{ width: 250 }} label="状态">
            <Select
              style={{ width: '100%' }}
              options={stateOpctions}
            />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" onClick={() => getDataList()}>查询</Button>
              <Button htmlType="button" onClick={onReset}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>

      <div className={styles.Table}>
        <Table dataSource={data?.data} pagination={false} columns={columns} />
        <div className={styles.Pagination}>
          <Pagination showQuickJumper defaultCurrent={1} total={data.count} onChange={onChange} />
        </div>
      </div>
    </div>
  );
};

export default User;